<template>
  <!-- 验证手机号页面 -->
  <view class="main">
    <view class="top">
      <image src="../../imges/shoujiPB.png" mode="aspectFill"></image>
    </view>
    <view class="content">
      <view class="title"> 请输入手机号验证身份 </view>
      <view class="phone_">
        <image src="../../imges/phone_v.png" mode="aspectFill"></image>
        <input
          type="text"
          :value="phone"
          placeholder="请输入手机号"
          @input="phoneInput"
        />
      </view>
      <view class="yanzheng_">
        <view class="left">
          <image src="../../imges/yanzheng_v.png" mode="aspectFill"></image>
          <input
            type="text"
            :value="phone_code"
            placeholder="请输入验证码"
            @input="phoneInputCode"
          />
        </view>
        <view class="right" @tap="getPhoneCode" v-if="ishi"> 获取验证码 </view>
        <view class="right" v-if="!ishi"> 验证码 {{ time }} </view>
      </view>

      <view class="btn_p" @tap="phoneLogin"> 确定 </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      phone: "",
      phone_code: "",
      ishi: true,
      time: 60,
      accessToken: "",
      openId: "",
    };
  },
  onLoad(options) {
    // console.log(options)
    this.accessToken = options.accessToken;
    this.openId = options.openId;
  },
  methods: {
    phoneInput(e) {
      //手机号赋值
      this.phone = e.detail.value;
    },
    phoneInputCode(e) {
      this.phone_code = e.detail.value;
    },
    phoneLogin() {
      //手机号验证登录
      if (this.phone == "") {
        uni.showToast({
          title: "手机号不能为空",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      if (this.phone_code == "") {
        uni.showToast({
          title: "验证码不能为空",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "请填写正确的手机号",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      request({
        url: "h5/loginapptoken/bindTel",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
        },
        data: {
          openId: this.openId,
          telephone: this.phone,
          accessToken: this.accessToken,
        },
      }).then((res) => {
        console.log(res, "绑定手机号获取token");
        if (res.data.code == 200) {
          uni.setStorageSync("token", res.data.data.token); //缓存token'
          uni.setStorageSync("personal", res.data.data);
          uni.showToast({
            title: "登录成功",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 2000);
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    getPhoneCode() {
      //点击获取验证
      // console.log(this.phone)
      if (this.phone == "") {
        uni.showToast({
          title: "手机号不能为空",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "请填写正确的手机号",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      this.ishi = false;
      // 掉获取验证码的接口
      request({
        url: "h5/login/verificationCode",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
        },
        data: {
          telPhone: this.phone,
          type: "12",
        },
      }).then((res) => {
        // console.log(res, '验证码')
      });
      var time_ed = setInterval(() => {
        //验证码倒计时处理
        var time = this.time;
        if (time == 0) {
          clearInterval(time_ed);
          this.time = 60;
          this.ishi = true;
        } else {
          time--;
          this.time = time;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
	.main{
		height: 100vh;
		width: 100vw;
		background-color:  #F5F5F5;
	}
	.top {
		width: 750rpx;
		height: 590rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.content {
		padding: 61rpx  58rpx;
		box-sizing: border-box;
		position: relative;
		top: -150rpx;
		width: 690rpx;
		height: 627rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		.title{
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			text-align: center;
		}
		.phone_ {
			margin-top: 63rpx;
			width: 574rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			border: 2rpx solid #CECECE;
			display: flex;
			align-items: center;
			padding: 0 36rpx;
			box-sizing: border-box;
			image {
				width: 32rpx;
				height: 40rpx;
				 margin-right: 15rpx;
			}
		}
		.yanzheng_ {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			.left {
				width: 350rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #CECECE;
				display: flex;
				padding: 0 34rpx;
				align-items: center;
				height: 100%;
				box-sizing: border-box;
				image {
					width: 40rpx;
					height: 48rpx;
					margin-right: 13rpx;
				}
				input {
					flex: 1;
				}
			}
		.right {
			width: 199rpx;
			height: 100rpx;
			background: #176BD8;
			border-radius: 8rpx;2
			text-align: center;
			line-height: 100rpx;
			font-size: 29rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			}
		}
		.btn_p {
			margin-top: 40rpx;
			line-height: 100rpx;
			text-align: center;
			width: 574rpx;
			height: 100rpx;
			background: #176BD8;
			border-radius: 8rpx;
			font-size: 29rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
